<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="唯一码" prop="code">
        <el-input v-model="form.code" placeholder="唯一码" />
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="图片" prop="image">
        <uploadImg v-model="form.image" placeholder="请上传图片" />
      </el-form-item>
      <el-form-item label="是否显示" prop="isshow">
        <el-radio-group v-model="form.isshow">
          <el-radio v-for="(item,index) in radioLable" :key="index" :label="parseInt(index)">{{ item }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="false" label="描述" prop="description">
        <el-input v-model="form.description" placeholder="请上描述" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <Tinymce v-model="form.content" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort" type="number" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { add, edit, rows } from '@/api/pages'
import Tinymce from '@/components/Tinymce'
import uploadImg from '@/components/Upload/uploadImg'
import { notifySuccess } from '@/utils/message'
export default {
  components: { Tinymce, uploadImg },
  data() {
    return {
      cateList: {},
      radioLable: { 1: '是', 2: '否' },
      handleType: 'add',
      form: {
        id: null,
        isshow: 1,
        code: null,
        title: '',
        istop: 2,
        ishot: 2,
        sort: 100,
        image: '',
        imageView: null,
        content: '',
        keywords: '',
        description: ''
      },
      rules: {
        title: [{ required: true, message: '标题不能为空' }],
        image: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        // keywords: [{ required: true, message: '关键词不能为空', trigger: 'blur' }],
        isshow: [{ required: true, message: '是否显示不能为空', trigger: 'change' }]
      }
    }
  },
  created(options) {
    if (this.$route.query.id) {
      this.handleType = 'edit'
      this.rowsinfo(this.$route.query.id)
    }
  },
  methods: {

    // 提交按钮
    onSubmit() {
      const that = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (that.handleType === 'add') {
            that.handleAdd()
          } else {
            that.hadleEdit()
          }
        }
      })
    },
    // 添加操作
    handleAdd() {
      add(this.form).then(res => {
        notifySuccess(res.msg || '提交成功')
        this.$router.push({ name: 'pagesIndex' })
      })
    },
    // 编辑操作
    hadleEdit() {
      edit(this.form.id, this.form.isshow, this.form.code, this.form.title, this.form.sort, this.form.image, this.form.content, this.form.description).then(res => {
        notifySuccess(res.msg || '保存成功')
        this.$router.push({ name: 'pagesIndex' })
      })
    },
    // 获取编辑信息
    rowsinfo(id) {
      var that = this
      rows(id).then(res => {
        that.form = res.data
        that.form.imageView = res.data.image.view_url
        that.form.image = res.data.image.url
      })
    }
  }
}
</script>
<style scoped>
.app-container{    max-width: 1200px;}
.line{
  text-align: center;
}
</style>

